在计算机图形学中，我们区分 矢量 和 位图 图形。矢量图形（如 SVG）通过逻辑形状描述图像；每个元素都是 DOM 中的持久对象。相反，位图图形（如 HTML5 Canvas）则基于 彩色像素点阵。
1. 过渡到 Canvas
虽然 SVG 更容易通过 CSS 样式化，但浏览器必须跟踪每一个节点。对于高性能需求，例如拥有成千上万个移动元素的游戏，Canvas API 更具优势。它提供了一个单一的 DOM 元素来封装绘图表面——本质上是一块“空白画布”。
2. 绘图上下文
而 <canvas> 元素在初始化其 上下文之前只是一个“黑箱”。该对象的方法提供了实际的绘图接口，将显示元素与渲染逻辑解耦。
var context = canvas.getContext("2d");
3. 命名空间意识
在基于 XML 的图形（如 SVG）中， xmlns="http://www.w3.org/2000/svg" 属性至关重要。它向浏览器发出信号，使其从标准的 HTML 解析切换到特定的图形模式，从而让形状标签能被识别为可交互的对象。
main.py
TERMINALbash — 80x24
> Ready. Click "Run" to execute.
>
QUESTION 1
What is the primary difference between Vector and Bitmap graphics?
Vector uses pixel data; Bitmap uses logical shapes.
Vector uses logical shape descriptions; Bitmap uses a grid of colored dots.
Vector is always faster for game rendering.
Bitmap elements remain persistent in the DOM.
✅ Correct!
Correct! Vector graphics describe 'what' a shape is, while bitmaps describe 'what color' each pixel is.❌ Incorrect
Think about the DOM: SVG elements are actual tags (logical), whereas Canvas is just a grid of pixels (rasters).QUESTION 2
What is the purpose of the
xmlns attribute in an SVG tag?To define the width and height of the viewport.
To link an external CSS stylesheet.
To change the element to a different XML namespace for specific schema recognition.
To enable hardware acceleration for bitmap rendering.
✅ Correct!
Exactly. Without the namespace, the browser would treat tags like <circle> as unknown HTML tags.❌ Incorrect
XML namespaces (xmlns) are used to identify which schema the browser should use to interpret the tags.QUESTION 3
How do you access the drawing interface for an HTML5 Canvas?
By modifying the .style.color property of the canvas.
By calling the getContext('2d') method on the canvas element.
By inserting SVG tags inside the <canvas> tags.
By using the document.draw() global function.
✅ Correct!
The context object is the gateway to all imperative drawing methods.❌ Incorrect
The canvas itself is just a container; the 'context' provides the methods like fillRect().QUESTION 4
Why does a dashboard with 10,000 data points run faster on Canvas than SVG?
Canvas uses fewer DOM nodes, reducing browser tracking overhead.
Canvas allows for better CSS styling of individual bars.
SVG cannot handle color hex codes.
Canvas automatically deletes old frames.
✅ Correct!
Correct. 10,000 SVG nodes would bloat the DOM, while Canvas only has one node regardless of the number of shapes drawn.❌ Incorrect
Every SVG shape is a DOM object the browser must maintain. Canvas only maintains pixel data.QUESTION 5
Once a shape is drawn to a Canvas, what happens to its 'identity'?
It can be selected and moved via standard DOM queries.
It is stored as a persistent object in the browser memory.
It becomes part of the pixel raster and loses its individual identity.
It is automatically converted to an SVG path.
✅ Correct!
Yes. After drawing, the canvas only knows 'these pixels are red'; it doesn't know 'this is a circle'.❌ Incorrect
Unlike SVG, Canvas is imperative. Once drawn, the 'shape' is just colored pixels.Case Study: EconomicCorp Data Visualization
Optimizing a High-Density Financial Dashboard
EconomicCorp needs a real-time ticker that displays 5,000 trade entries per minute. Initially, they used SVG, but the browser freezes as the trading day progresses. You are tasked with migrating the rendering logic to Canvas to maintain 60 FPS.
Q
Identify the primary architectural flaw in using SVG for a 5,000-node real-time ticker.
Solution:
The flaw is 'DOM Bloat.' Every SVG element is a persistent DOM object. Tracking 5,000+ objects with frequent updates forces the browser to perform expensive layout and reflow calculations every frame, leading to CPU exhaustion.
The flaw is 'DOM Bloat.' Every SVG element is a persistent DOM object. Tracking 5,000+ objects with frequent updates forces the browser to perform expensive layout and reflow calculations every frame, leading to CPU exhaustion.
Q
Describe how the 'Context' object simplifies the rendering of these 5,000 items.
Solution:
By using getContext('2d'), the developer can iterate through the trade data and call context.fillRect() or context.lineTo() directly. This draws pixels into a single buffer. The browser only manages one DOM element (the canvas), significantly reducing memory overhead.
By using getContext('2d'), the developer can iterate through the trade data and call context.fillRect() or context.lineTo() directly. This draws pixels into a single buffer. The browser only manages one DOM element (the canvas), significantly reducing memory overhead.
Q
If a user wants to click on a specific trade bar to see details, which rendering method (SVG or Canvas) makes 'Hit Detection' easier and why?
Solution:
SVG makes hit detection easier because every bar is a DOM element that supports standard event listeners (onclick). In Canvas, since the bar is just pixels, the developer must manually calculate if the mouse coordinates intersect with the area where the bar was drawn.
SVG makes hit detection easier because every bar is a DOM element that supports standard event listeners (onclick). In Canvas, since the bar is just pixels, the developer must manually calculate if the mouse coordinates intersect with the area where the bar was drawn.